<!DOCTYPE html>
<html>
    <head>
        <title>vue router</title>
        <link href="./vue-router.css" rel="stylesheet" type="text/css"/>
        <script src="./vue.js"></script>
        <script src="./vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-view name="left"></router-view>
            <div id="main">
                <router-view name="top"></router-view>
                <router-view name="main"></router-view>
            </div>
        </div>
        <script>
            var topCom = Vue.extend({
                template: '<div id="top">顶部</div>'
            })
        
            var leftCom = Vue.extend({
                template: '<div id="slider">侧边栏</div>'
            })
        
            var mainCom = Vue.extend({
                template: '<div id="mainContent">主页</div>'
            })
        
            var router = new VueRouter({
                routes:[
                    {
                        path: '/',
                        name: 'home',
                        components:{
                            top: topCom,
                            left: leftCom,
                            main: mainCom
                        }
                    }
                ]
            })
        
            var app = new Vue({
                el: '#app',
                router
            })
        </script>
    </body>
</html>